<template>
  <div class="home">
    <Swiper></Swiper>
    <div class="content ww">
      <div class="content-l">
        <div class="recommend">
          <div class="rcmd-h">
            <a href="javascript:;" @click="toPlaylist('')">热门推荐</a>
            <div class="type-list">
              <p class="type-item" v-for="(item, index) in songType" :key="item.id">
                <a href="javascript:;" @click="toPlaylist(item.id, item.name)">{{ item.name }}</a>
                <span class="line" v-if="index+1 !== songType.length">|</span>
              </p>
            </div>
            <div class="card-r">
              <a href="javascript:;" @click="toPlaylist('')">更多</a>
              <i></i>
            </div>
          </div>
          <MusicList :recommendData="recommendSheet"></MusicList>
        </div>
      </div>
      <UserInfo></UserInfo>
    </div>
  </div>
</template>

<script>
import { reqRecommendSheet, reqSongTypeList } from '@/api/index'
import Swiper from '@/components/Swiper'
import MusicList from '@/components/MusicList'
import UserInfo from '@/components/UserInfo'
export default {
  components:{ Swiper, MusicList, UserInfo },
  data() {
    return {
      recommendSheet: [],
      songType: []
    }
  },
  methods: {
    init() {
      reqRecommendSheet().then(res => {
        res.rows.forEach((item, index) => {
          if(index < 8) {
              let obj = {
              id: item.id,
              songListId: item.songList.id,
              name: item.songList.name,
              // imgUrl: `../../images/songSheet0${ index + 1 }.jpg`,
              imgIdx: index + 1,
              isBoutique: index % 3 === 0 ? true : false,
              synopsis: ( index + 8 ) * 8888,
              isRadioProgram: false
            }
            this.recommendSheet.push(obj)
          }
        })
      })
      reqSongTypeList().then(res => {
        res.rows.forEach(item => {
          item.name = item.name.slice(0, -4)
          this.songType.push(item)
        })
      }) 
    },
    toPlaylist(catId, cat) {
      this.$router.push({
        path: '/playlist',
        query: { catId, cat }
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
  .home {
    .content {
      display: flex;
      box-sizing: border-box;
      .content-l {
        flex: 1;
        padding: 20px;
        border-left: 1px solid #D3D3D3;
        border-right: 1px solid #D3D3D3;
        .rcmd-h {
          height: 33px;
          padding: 0 10px 0 34px;
          border-bottom: 2px solid #C10D0C;
          background: url(../../assets/images/typeList.png) no-repeat -225px -156px;
          &>a {
            float: left;
            font-size: 20px;
            font-weight: normal;
            line-height: 28px;
            color: #333;
            &:hover {
              text-decoration: none;
              color: #333 !important;
            }
          }
          .type-list {
            float: left;
            margin: 7px 0 0 20px;
            .type-item {
              display: inline-block;
              a {
                color: #666;
                &:hover {
                  color: #666 !important;
                  text-decoration: underline !important;
                }
              }
              span {
                margin: 0 10px;
                color: #ccc;
              }
            }
            .more {
              float: right;
            }
          }
          .card-r {
            float: right;
            margin-top: 9px;
            a {
              font-weight: normal;
              color: #666;
              &:hover {
                text-decoration: underline;
                color: #666 !important;
              }
            }
            i {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 4px;
              vertical-align: middle;
              background: url(../../assets/images/typeList.png) no-repeat 0 -240px;
            }
          }
        }
      }
    }
  }
</style>